/*
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-23 14:05:56
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 18:40:31
 */
/**
 * 扫描点
 * @igonre
 */
class ScanPointObject {
  constructor(size, map, option) {
    this.map = map;
    this.size = size;
    this.width = size;
    this.height = size;
    this.data = new Uint8Array(size * size * 4);

    this.option = Object.assign(
      {
        step: 2,
        scanRange: 360,
        initScanDegree: 0,
        rgb: '255, 100, 100',
        startOpacity: 0.1,
        endOpacity: 0.9
      },
      option
    );
  }

  onAdd() {
    var canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    this.context = canvas.getContext('2d');
  }

  /**
   * 图像绘制方法
   * @desc 循环调用，绘制一帧动画，绘制完成后调用地图重绘方法，绘制下一帧，形成动画效果
   */
  render() {
    let context = this.context;
    context.clearRect(0, 0, this.width, this.height);
    context.beginPath();

    this.option.initScanDegree += this.option.step;
    var radStep = 1; //渲染间隔度数-角度
    var sumStep = this.option.scanRange / radStep; //总共渲染次数
    var opaStep = (this.option.endOpacity - this.option.startOpacity) / sumStep; //透明度步进
    for (var i = 0; i < sumStep; i++) {
      context.fillStyle = 'rgba(' + this.option.rgb + ',' + (this.option.startOpacity + opaStep * i) + ')';
      context.beginPath();
      context.moveTo(this.width / 2, this.height / 2);
      context.arc(
        this.width / 2,
        this.height / 2,
        this.width / 2,
        (-(this.option.scanRange * (1 - i / sumStep)) + this.option.initScanDegree) / 180 * Math.PI,
        (-(this.option.scanRange * (1 - (i + 1) / sumStep)) + this.option.initScanDegree) / 180 * Math.PI
      );
      context.fill();
      context.closePath();
    }

    // 更新图片数据
    this.data = context.getImageData(0, 0, this.width, this.height).data;

    // 调用地图重绘方法，加载下一帧动画
    this.map.triggerRepaint();

    // 返回true表示图片刷新完成
    return true;
  }
}

export default ScanPointObject;
